<template>
  <div class="my-form-item">
    <template v-if="type == 'INPUT'">
      <ElInput :model-value="modelValue" v-bind="$attrs" @update:model-value="onChange" />
    </template>
    <template v-if="type == 'SELECT'">
      <ElSelect :model-value="modelValue" v-bind="$attrs" @update:model-value="onChange">
        <ElOption v-for="item in options" :key="item.value" :value="item.value" :label="item.label">
          <div class="my-option-item">
            <img v-if="item.icon_img" class="icon" :src="item.icon_img" alt="">
            {{ item.label }}
          </div>
        </ElOption>
      </ElSelect>
    </template>
    <template v-if="type == 'DATERANGE'">
      <ElDatePicker :model-value="modelValue" type="daterange" unlink-panels range-separator="-"
        start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" v-bind="$attrs"
        @update:model-value="onChange" />
    </template>
    <template v-if="type == 'DATETIMERANGE'">
      <ElDatePicker :model-value="modelValue" type="datetimerange" unlink-panels range-separator="-"
        start-placeholder="开始时间" end-placeholder="结束时间" :shortcuts="shortcuts" v-bind="$attrs"
        @update:model-value="onChange" />
    </template>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, useAttrs, toRefs } from 'vue';
import { ElInput, ElSelect, ElOption, ElDatePicker } from 'element-plus';
import dayjs from 'dayjs';

const $attrs = useAttrs();

const props = defineProps(["modelValue", "type", "options"])

const emits = defineEmits(['update:modelValue']);
const onChange = (value) => {
  if (props.type == 'DATERANGE') {
    value = value?.map(val => {
      return dayjs(val).format("YYYY-MM-DD")
    })
  }
  if (props.type == 'DATETIMERANGE') {
    value = value?.map(val => {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss")
    })
  }
  emits('update:modelValue', value);
}

const getDate = (num, type = "day") => {
  if (type == "day") {
    const start = dayjs().startOf("day").subtract(num, 'day');
    const end = dayjs().endOf("day");
    return [start, end]
  }
  if (type == "week") {
    const start = dayjs().startOf("week").subtract(num * 7, 'day');
    const end = dayjs().endOf("week").subtract(num * 7, 'day');;
    return [start, end]
  }
  if (type == "month") {
    const start = dayjs().startOf("month").subtract(num, 'month');
    const end = dayjs().endOf("month").subtract(num, 'month');;
    return [start, end]
  }
  if (type == "year") {
    const start = dayjs().startOf("year").subtract(num, 'year');
    const end = dayjs().endOf("year").subtract(num, 'year');;
    return [start, end]
  }
}

const shortcuts = ref([
  { text: '昨天', value: () => getDate(1, "day") },
  { text: '本周', value: () => getDate(0, "week") },
  { text: '上周', value: () => getDate(1, "week") },
  { text: '本月', value: () => getDate(0, "month") },
  { text: '上月', value: () => getDate(1, "month") },
  { text: '上年', value: () => getDate(1, "year") },
  { text: '过去7天', value: () => getDate(7, "day") },
  { text: '过去14天', value: () => getDate(14, "day") },
  { text: '过去30天', value: () => getDate(30, "day") },
  { text: '过去90天', value: () => getDate(90, "day") },
  { text: '过去180天', value: () => getDate(180, "day") },
])

</script>
<style lang="scss" scoped>
.my-form-item {
  width: 100%;

  ::v-deep {
    .el-input {
      width: 100%;

      .el-input__wrapper {
        background-color: transparent;
        box-shadow: none;
        border: 0;
      }
    }

    .el-select {
      width: 100%;

      .el-select__wrapper {
        background-color: transparent;
        box-shadow: none;
        border: 0;
      }
    }

    .el-date-editor {
      width: 100%;
      background-color: transparent;
      box-shadow: none;
      border: 0;
    }
  }

}

.my-option-item {
  display: flex;
  align-items: center;
  color: #6c7786;
  gap: 0 12px;

  .icon {
    width: 16px;
    height: 16px;
  }
}
</style>
